<template>
  <div class="editor">
    <div class="mb-3">
      <form class="p-3">
        <label for="exampleInputEmail1" class="form-label">文章标题</label>
        <input v-model="paper.titleName" type="text" class="form-control mb-2" id="title">
        <tiny-mce v-model="paper.content" />
        <el-button type='primary' :loading="loading" @click="addPaper" class="btn btn-primary mt-2">发布文章</el-button>
      </form>
    </div>
  </div>
</template>

<script setup lang='ts'>
const loading = ref<boolean>(false)
const paper = ref<Paper>({
  titleName: '',
  content: '',
  desc: ''
})
localStorage.getItem('paper') && (paper.value = JSON.parse(localStorage.getItem('paper')!))
const addPaper = async () => {
  loading.value = true
  try {
    const { data } = await useApi.papers.add(paper.value)
  }
  finally {
    loading.value = false
  }
}
watch(paper.value, () => {
  localStorage.setItem('paper', JSON.stringify(paper.value))
}, { deep: true })
</script>

<style lang="scss" scoped>
.editor {}
</style>